<template>
  <div class="qxgl">
    <div style="padding:20px">
      <table class="special_table" width="100%">
        <thead>
          <tr>
            <td style="width: 10%">操作人</td>
            <td style="width: 10%">操作类型</td>
            <td style="width: 15%">操作说明</td>
            <td style="width: 10%">操作路径</td>
            <td style="width: 5%">请求类型</td>
            <td style="width: 30%">请求参数</td>
            <td style="width: 10%">IP地址</td>
            <td style="width: 10%">耗时</td>
          </tr>
        </thead>
        <tbody>
          <template v-if="tableData.length">
            <tr v-for="(item, index) in tableData" :key="index">
              <td>{{ item.realName||'-' }}({{ item.userName}})</td>
              <td>{{ item.operateType||'-' }}</td>
              <td>{{ item.logContent||'-' }}</td>
              <td>{{ item.requestUrl||'-' }}</td>
              <td>{{ item.requestType||'-' }}</td>
              <td>{{ item.requestParam||'-' }}</td>
              <td>{{ item.ip||'-' }}</td>
              <td>{{ item.costTime||'-' }} s</td>
            </tr>
          </template>
          <template v-else>
            <tr>
              <td colspan="5">暂无数据</td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    <div style="margin-top: 25px;text-align: center;">
      <el-pagination background :current-page="currentPage" :page-sizes="[10, 20, 30, 40,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      seachName: "",
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      dialogVisible: false,
      form: {
        userCode: "",
        userName: "",
        pass: ""
      },
      defaultProps: {
        children: "children",
        label: "name"
      },
      tree_data: [],
      dialogVisible_sq: false,
      checkedKeys: [],
      roleId: 0,
      options_user: [],
      value_user: [],
      nowId: 0,
      dialogVisible_addUser: false,
      linkRoleId: 0
    };
  },
  watch: {},
  mounted() {
    this.logList();
  },
  methods: {
    /**
     * @name logList
     * @description 操作日志-搜索
     * @author wqy
     * @date 2019-09-05 17:08:55
     */
    async logList() {
      let data = {
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      const res = await this.$store.dispatch("qxgl-czrz/findList", data);
      this.tableData = res.data.list;
      this.totalPage = res.data.total;
    },
    /**
     * @name  handleCurrentChange handleSizeChange
     * @description 分页
     * @author wqy
     * @date 2019-09-16 15:45:04
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.logList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.logList();
    },
    /**
     * @name seachBtn
     * @description 输入关键字查询
     * @author wqy
     * @date 2019-09-16 15:20:17
     */
    seachBtn() {
      this.currentPage = 1;
      this.logList();
    }
  }
};
</script>
<style  scoped>
h5,
p,
ul,
img {
  padding: 0;
  margin: 0;
  border: 0;
}
.clearfix {
  *zoom: 1;
}

.clearfix:after {
  display: block;
  clear: both;
  content: " ";
  height: 0;
  visibility: hidden;
}

li {
  list-style-type: none;
}
.qxgl {
  padding: 15px;
}
.zsHistory .iconfont {
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}
.blue {
  color: #6bc5ff;
  cursor: pointer;
}
.greey {
  color: #aaafb3;
}
.greey:hover {
  color: #eb9616;
}
.addBtn {
  display: inline-block;
  margin-right: 20px;
  color: #409eff;
  background: #ecf5ff;
  border: 1px solid;
  border-color: #b3d8ff;
  padding: 6px 15px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.addBtn:hover {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}
.treeBox {
  height: 350px;
  overflow-y: scroll;
}
.userName {
  padding-right: 10px;
  display: inline-block;
}
.titleName {
  line-height: 36px;
  padding-right: 15px;
}
.padding20 {
  padding-top: 20px
}
</style>
